// components/echartsLine/echartsLine.js
import * as echarts from '../../components/ec-canvas/echarts';
var http = require('../../utils/http');
var api = require('../../utils/api');



Component({
    /**
     * 组件的属性列表
     */
    properties: {
        child_id: Number
    },

    /**
     * 组件的初始数据
     */
    data: {
        index:1,
        option1: [{
                text: '近6个月',
                value: 6
            },
            {
                text: '近12个月',
                value: 12
            },
            {
                text: '近18个月',
                value: 18
            },
            {
                text: '近24个月',
                value: 24
            },
        ],
        value1: 6,
        show: true,
        ec: {
            lazyLoad: true
        },
        dateArr: [],
        chart: null
    },

    /**
     * 组件的方法列表
     */
    methods: {
        changedropdown(e) {
            this.setData({
                value1: e.detail,
            })
            this.getLineData()
        },
        onChangeTab(e) {
            this.setData({
                index: e.currentTarget.dataset.index,
            })
            this.getLineData()
        },
        getLineData() {
            http.postHttp(api.getLineData, {
                    child_id: this.data.child_id,
                    rtype: this.data.index == 1 ? 'qgds' : 'yzcd',
                    month: this.data.value1,
                },
                (result) => {
                    this.oneComponent.init((canvas, width, height,dpr) => {
                        const chart = echarts.init(canvas, null, {
                            width: width,
                            height: height,
                            devicePixelRatio: dpr, // new
                            locale: "ZH"
                        });
                        this.setOption(chart, result);
                        chart.dispatchAction({
                            type: "showTip",
                            seriesIndex: 0, // 显示第几个series，从0开始
                            dataIndex: result.data.right.length-2 // 显示第几个数据，从0开始
                        })
                        this.chart = chart;
                        this.setData({
                            show: true
                        })
                        return chart;
                    });
                },
                (err) => {
                    console.log(err);
                },
            )
        },
        setOption(chart, result) {
            let data = result.data.right
            let data2 = result.data.left
            var option = {
                color: ['#89DFA1', '#77A8DA'],
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    axisPointer: {
                        animation: true
                    },
                    formatter: (params) => {
                        let data = (params[0].axisValueLabel)
                        let tem = ''
                        params.forEach(ele => {
                            let d = this.data.index == 1 ? 'ds' : 'mm'
                            tem += ele.seriesName + '：' + ele.value[1] + d + '\n'
                        })
                        tem = data + '\n' + tem
                        return tem
                    },
                },
                grid: {
                    top:'10%',
                    left: '3%',
                    right: '5%',
                    bottom: '13%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'time',
                    // boundaryGap: true,
                    minInterval: 3600 * 24 * 1000 * 28,
                    splitLine: {
                        show: true, //是否显示竖向网格线
                    },
                    axisLabel: {
                        padding: [26, 0, 0, 0],
                        fontSize:14,
                        show: true, //是否显示x轴数据
                        // interval: 0, //使x轴文字显示全
                    },
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false
                    },
                    position: "bottom",
                    axisPointer: {
                        show: true,
                        type: "line",
                        label: {
                            backgroundColor: 'transparent',
                            show: true,
                            color: '#7DC9EA',
                            formatter: (parame) => {
                                let date = new Date(parame.value)
                                let formatObj = {
                                    y: date.getFullYear(),
                                    m: date.getMonth() + 1,
                                    d: date.getDate()
                                  }
                                return `${formatObj.y}-${formatObj.m}-${formatObj.d}`
    
                            }
                            
                        },
                        lineStyle: {
                            type: "dashed",
                            color: '#96ACB3E6',
                        }
                    },
    
                }],
                yAxis: [{
                    type: 'value',
                    inverse: this.data.index==1?true:false,
                    show: false, //是否显示y轴
                    splitLine: {
                        show: false, //是否显示横向网格线
                    },
                    max:function (value) {
                        let max = Math.ceil(value.max + (value.max - value.min) * 0.2)
                        return max
                      },
                    // max: function (value) {
                    //     return value.max
                    //   },
                }],
                dataZoom: [{
                        type: 'slider', //滑动条
                        brushSelect: false,
                        start: 0, //初始化时，滑动条宽度开始标度
                        end: 100, //初始化时，滑动条宽度结束标度
                        height: 25,
                        bottom: '22px',
                        backgroundColor: 'transparent',
                        borderColor: 'transparent',
                        moveHandleSize: 5,
                        moveHandleStyle: {
                          color: 'transparent'
                        },
                        emphasis: {
                          moveHandleStyle: {
                            color: 'transparent'
                          }
                        },
                        handleSize: '120%',
                        handleIcon:"path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5M36.9,35.8h-1.3z M27.8,35.8 h-1.3H27L27.8,35.8L27.8,35.8z",
                        handleStyle: { 
                            color: 'rgba(123, 154, 204, 0.1)', 
                            global: true  , // 缺省为 false
                            shadowBlur: 6,
                            shadowColor: 'rgba(123, 154, 204, 0.2)',
                            shadowOffsetX: 0, // 阴影偏移x轴多少
                            shadowOffsetY: 0 // 阴影偏移y轴多少
                          },
                        fillerColor: 'transparent',
                        textStyle: {
                          color: 'transparent'
                        },
                        dataBackground: {
                            lineStyle: {
                              color: 'transparent'
                            },
                            areaStyle: {
                              color: 'transparent'
                            }
                          },
                          showDataShadow: false
                    },
                    {
                        type: 'inside', //内置滑动，随鼠标滚轮展示
                        start: 0, //初始化时，滑动条宽度开始标度
                        end: 100 //初始化时，滑动条宽度结束标度
                    }
                ],
                series: [{
                        name: '右眼',
                        type: 'line',
                        // z: 999,
                        // stack: 'Total',
                        smooth: true,
                        symbolSize: 8,
                        itemStyle: {
                            emphasis: {
                                label: {
                                    show: false,
                                    position: ['-30','-30'],
                                    textStyle: {
                                        color: '#000'
                                    },
                                    backgroundColor: '#EEF3FF',   //不能是rgba形式，否则会导致底下的三角形无法遮盖蓝色边框
                                    formatter: (parame) => {
                                        let d = this.data.index==1?'DS':'mm'
                                        return '{a|' + parame.value[1]+ d + '}'
                                    },
                                    rich: {
                                        a: {
                                            color: '#000',
                                            backgroundColor: '#fff',
                                            padding: [5, 10],
                                            borderRadius: 4,
                                            borderWidth: 1,
                                            borderColor: '#d1dad7',
                                            shadowColor: '#d1dad7',
                                            shadowBlur: 4,
                                            shadowOffsetX: 1,
                                            shadowOffsetY: 1,
                                        },
                                
                                    }
                                }
                            }
                        },
                        areaStyle: {
                            origin: this.data.index==1?'end':'start',
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(137, 223, 161,0.3)'
                            }, {
                                offset: 1,
                                color: 'rgba(137, 223, 161,0)'
                            }])
                        },
                        markLine: {
                            silent: true,
                            lineStyle: {
                                normal: {
                                    color: this.data.index==1?'#EDB5A1E6':'#fff' // 这儿设置安全基线颜色
                                }
                            },
                            data: [{
                                yAxis: 0 //这儿定义基准线的数值为多少
                            }],
                            symbol: "none", //去掉警戒线最后面的箭头
                            label: {
                                normal: {
                                    position: "start",
                                    formatter: '0.00', // 这儿设置安全基线
                                    color: this.data.index==1?'#EDB5A1E6':'#fff'
                                }
                            }
                        },
                        data: data
                    },
                    {
                        name: '左眼',
                        // z: 999,
                        type: 'line',
                        // stack: 'Total',
                        smooth: true,
                        symbolSize: 8,
                        itemStyle: {
                            emphasis: {
                                label: {
                                    show: false,
                                    position: ['-30','-30'],
                                    textStyle: {
                                        color: '#000'
                                    },
                                    backgroundColor: '#EEF3FF',   //不能是rgba形式，否则会导致底下的三角形无法遮盖蓝色边框
                                    formatter: (parame) => {
                                        let d = this.data.index==1?'DS':'mm'
                                        return '{a|' + parame.value[1]+ d + '}'
                                    },
                                    rich: {
                                        a: {
                                            color: '#000',
                                            backgroundColor: '#fff',
                                            padding: [5, 10],
                                            borderRadius: 4,
                                            borderWidth: 1,
                                            borderColor: '#d1dad7',
                                            shadowColor: '#d1dad7',
                                            shadowBlur: 4,
                                            shadowOffsetX: 1,
                                            shadowOffsetY: 1,
                                        },
                                
                                    }
                                }
                            }
                        },
                        areaStyle: {
                            origin: this.data.index==1?'end':'start',
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(119, 168, 218,0.3)'
                            }, {
                                offset: 1,
                                color: 'rgba(119, 168, 218,0)'
                            }])
                        },
                        markLine: {
                            silent: true,
                            lineStyle: {
                                normal: {
                                    color: this.data.index==1?'#EDB5A1E6':'#fff' // 这儿设置安全基线颜色
                                }
                            },
                            data: [{
                                yAxis: 0 //这儿定义基准线的数值为多少
                            }],
                            symbol: "none", //去掉警戒线最后面的箭头
                            label: {
                                normal: {
                                    position: "start",
                                    formatter: '0.00', // 这儿设置安全基线
                                    color: this.data.index==1?'#EDB5A1E6':'#fff'
                                }
                            }
                        },
    
                        data: data2
                    },
    
                ]
            };
            chart.setOption(option);
        },
    },
    ready() {
        this.oneComponent = this.selectComponent('#mychart-dom-bar');
        this.getLineData()
    }
})